<template>
  <el-form
    ref="taskForm"
    :model="form"
    size="mini"
    label-width="110px"
    label-position="left"
    class="task-form"
  >
    <el-row>
      <el-col :span="10">
        <el-form-item label="任务优先级">
          <el-select
            v-model="form.region"
            placeholder="请选择"
            style="width: 280px;"
            :disabled="!isActive"
          >
            <el-option
              label="区域一"
              value="shanghai"
            ></el-option>
            <el-option
              label="区域二"
              value="beijing"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="租户 ">
          <el-select
            v-model="form.region"
            placeholder="请选择"
            style="width: 280px;"
            :disabled="!isActive"
          >
            <el-option
              label="区域一"
              value="shanghai"
            ></el-option>
            <el-option
              label="区域二"
              value="beijing"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="Worker分组">
          <el-select
            v-model="form.region"
            placeholder="请选择"
            style="width: 280px;"
            :disabled="!isActive"
          >
            <el-option
              label="区域一"
              value="shanghai"
            ></el-option>
            <el-option
              label="区域二"
              value="beijing"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="环境名称">
          <el-select
            v-model="form.region"
            placeholder="请选择"
            style="width: 280px;"
            :disabled="!isActive"
          >
            <el-option
              label="区域一"
              value="shanghai"
            ></el-option>
            <el-option
              label="区域二"
              value="beijing"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="失败重试次数">
          <el-input-number
            :disabled="!isActive"
            style="width: 280px;"
            v-model="form.num"
            controls-position="right"
            :step="1"
            :min="0"
            :max="999"
            data-unit="次"
          ></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="失败重试间隔">
          <el-input-number
            :disabled="!isActive"
            style="width: 280px;"
            v-model="form.num"
            controls-position="right"
            :step="1"
            :min="0"
            :max="999"
            data-unit="分"
          ></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="通知策略">
          <el-select
            :disabled="!isActive"
            v-model="form.region"
            placeholder="请选择"
            style="width: 280px;"
          >
            <el-option
              label="区域一"
              value="shanghai"
            ></el-option>
            <el-option
              label="区域二"
              value="beijing"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="告警组">
          <el-select
            :disabled="!isActive"
            v-model="form.region"
            placeholder="请选择"
            style="width: 280px;"
          >
            <el-option
              label="区域一"
              value="shanghai"
            ></el-option>
            <el-option
              label="区域二"
              value="beijing"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="CPU配额">
          <el-input-number
            :disabled="!isActive"
            style="width: 280px;"
            v-model="form.num"
            controls-position="right"
            :step="1"
            :min="0"
            :max="999"
            data-unit="%"
          ></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="最大内存">
          <el-input-number
            :disabled="!isActive"
            style="width: 280px;"
            v-model="form.num"
            controls-position="right"
            :step="1"
            :min="0"
            :max="999"
            data-unit="MB"
          ></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
  export default {
    data () {
      return {
        form: {
          name: '',
          num: 0,
          region: '',
        }
      }
    },
    props: {
      isActive: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      onSubmit () {
        console.log('submit!')
      }
    }
  }
</script>
<style lang="scss" scoped>
.task-form.el-form {
  ::v-deep .el-form-item__label {
    font-size: 16px !important;
    font-family: PingFang SC, PingFang SC-400 !important;
    font-weight: 400 !important;
    color: #333333 !important;
  }
  ::v-deep.el-input-number .el-input__inner {
    text-align: left !important;
  }
  .el-input-number[data-unit] {
    --el-input-number-unit-offset-x: calc(40px + 4px);
  }
  .el-input-number--small[data-unit] {
    --el-input-number-unit-offset-x: calc(32px + 4px);
  }
  .el-input-number[data-unit]::after {
    content: attr(data-unit);
    position: absolute;
    top: 0;
    right: var(--el-input-number-unit-offset-x);
    color: #8d8d8d;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .el-input-number[data-unit] .el-input__inner {
    padding-right: calc(1em + var(--el-input-number-unit-offset-x) + 4px);
  }
}
</style>
